{% extends 'base/base.html' %}

{% block title %}确认删除Webhook - {{ project.name }} - 多用户报警系统{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h2 class="h4">
                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 确认删除Webhook
                </h2>
            </div>
            <div class="card-body">
                <div class="alert alert-warning" role="alert">
                    <i class="fa fa-exclamation-circle" aria-hidden="true"></i> 警告：删除Webhook后，系统将不再向该URL发送任何通知。
                </div>
                <p class="mb-4">您确定要从项目 <strong>{{ project.name }}</strong> 中删除Webhook <strong>{{ webhook.name }}</strong> 吗？</p>
                <div class="mb-4">
                    <div class="p-3 bg-light rounded">
                        <p class="mb-2"><strong>Webhook名称：</strong>{{ webhook.name }}</p>
                        <p class="mb-2"><strong>Webhook URL：</strong>{{ webhook.url }}</p>
                        <p class="mb-2"><strong>触发事件：</strong></p>
                        <div class="badge-container mb-2">
                            {% for event in webhook.events %}
                                <span class="badge badge-primary mr-1 mb-1">
                                    {% for choice in webhook.EVENT_CHOICES %}
                                        {% if choice.0 == event %}
                                            {{ choice.1 }}
                                        {% endif %}
                                    {% endfor %}
                                </span>
                            {% endfor %}
                        </div>
                        <p class="mb-0"><strong>状态：</strong>
                            {% if webhook.is_active %}
                                <span class="badge badge-success">已激活</span>
                            {% else %}
                                <span class="badge badge-danger">已禁用</span>
                            {% endif %}
                        </p>
                        {% if webhook.last_triggered_at %}
                            <p class="mb-0"><strong>最后触发：</strong>{{ webhook.last_triggered_at|date:"Y-m-d H:i:s" }}</p>
                        {% endif %}
                    </div>
                </div>
                <form method="post">
                    {% csrf_token %}
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-danger">
                            <i class="fa fa-trash" aria-hidden="true"></i> 确认删除
                        </button>
                        <a href="{% url 'projects:project_webhooks' project.id %}" class="btn btn-secondary">
                            <i class="fa fa-times" aria-hidden="true"></i> 取消
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script>
    // 添加页面加载动画效果
    document.addEventListener('DOMContentLoaded', function() {
        // 为删除按钮添加二次确认提示
        const deleteButton = document.querySelector('.btn-danger');
        if (deleteButton) {
            deleteButton.addEventListener('click', function(e) {
                if (!confirm('确定要删除Webhook "{{ webhook.name }}" 吗？删除后将无法恢复。')) {
                    e.preventDefault();
                }
            });
        }
        
        // 为按钮添加悬停效果
        const buttons = document.querySelectorAll('.btn');
        buttons.forEach(button => {
            button.style.transition = 'transform 0.1s ease';
            button.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-1px)';
            });
            button.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
            });
        });
    });
</script>
{% endblock %}